<template>
  <view class="order-page">
    <!-- 订单信息卡片 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view class="order-info">
        <view class="info-item">
          <text class="label">订单金额</text>
          <text class="value price">¥{{orderInfo.paymentAmount}}</text>
        </view>
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{orderInfo.orderId}}</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{orderInfo.createTime}}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="price">¥{{orderInfo.paymentAmount}}</text>
      </view>
      <view class="btn-group">
        <button class="cancel-btn" @click="handleCancel">取消订单</button>
        <button class="pay-btn" @click="handlePay">立即支付</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        orderId: '',
        paymentAmount: 0,
        createTime: '',
        courseIds: '',
        paymentAmounts: ''
      }
    }
  },
  onLoad(options) {
    // 获取传递过来的课程信息
    if (options.courseIds && options.paymentAmounts) {
      this.orderInfo.courseIds = options.courseIds
      this.orderInfo.paymentAmounts = options.paymentAmounts
      this.createOrder()
    }
  },
  methods: {
    // 创建订单
    async createOrder() {
      try {
        const res = await uni.request({
          url: 'http://localhost:8080/order/insertOrder',
          method: 'POST',
          data: {
            courseIds: this.orderInfo.courseIds,
            paymentAmounts: this.orderInfo.paymentAmounts
          }
        })
        
        if (res.data.code === 200) {
          this.orderInfo.orderId = res.data.data
          this.orderInfo.createTime = new Date().toLocaleString()
          // 计算总金额
          const amounts = this.orderInfo.paymentAmounts.split(',')
          this.orderInfo.paymentAmount = amounts.reduce((sum, amount) => sum + Number(amount), 0)
        } else {
          uni.showToast({
            title: '创建订单失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      }
    },
    
    // 处理支付
    handlePay() {
      uni.navigateTo({
        url: '/pages/payment/index?orderId=' + this.orderInfo.orderId + '&amount=' + this.orderInfo.paymentAmount
      })
    },
    
    // 取消订单
    handleCancel() {
      uni.showModal({
        title: '提示',
        content: '确定要取消订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack({
              delta: 1
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  
  .order-card {
    margin: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .order-info {
      .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        
        .label {
          color: #666;
          font-size: 28rpx;
        }
        
        .value {
          font-size: 28rpx;
          
          &.price {
            color: #ff4d4f;
            font-weight: bold;
          }
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .price-info {
      .price {
        color: #ff4d4f;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    
    .btn-group {
      display: flex;
      gap: 20rpx;
      
      button {
        margin: 0;
        padding: 0 40rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        border-radius: 35rpx;
        
        &.cancel-btn {
          background-color: #f5f5f5;
          color: #666;
        }
        
        &.pay-btn {
          background-color: #ff4d4f;
          color: #fff;
        }
      }
    }
  }
}
</style> 